import React from 'react';
import { WebView, Animated, ActivityIndicator, Image, Keyboard, ScrollView, StyleSheet, Text, View, TouchableOpacity, Modal, TextInput, TouchableWithoutFeedback, DeviceEventEmitter, FlatList } from 'react-native';

import ScreenUtils from '../Utils/ScreenUtils'
import ColorUtils from '../Utils/ColorUtils'
import RouterUtils from '../Utils/RouterUtils'
import ToastUtils from '../Utils/ToastUtils'
import StorageUtils from '../Utils/StorageUtils'
import Constant from '../Constant/Constant'
import HttpUtils from '../Utils/HttpUtils'
import RuleUtils from '../Utils/RuleUtils'
import TimeUtils from '../Utils/TimeUtils'

export default class PageLwpcSubList extends React.Component
{
    static navigationOptions = ({navigation}) => ({
        gesturesEnabled: false,//是否支持滑动返回收拾，iOS默认支持，安卓默认关闭
        headerTitle: '房屋明细',
        headerStyle: {
            backgroundColor: ColorUtils.blue,
            height: ScreenUtils.statusBarHeight,
        },
        headerRight: (
            <TouchableOpacity onPress={() => DeviceEventEmitter.emit('jumpPageLwpcSubList', 'param')}>
                <Text style={{color: ColorUtils.white, fontSize: ScreenUtils.Font_16, marginRight: 16}}>
                    新建明细
                </Text>
            </TouchableOpacity>
        ),
        headerTintColor: ColorUtils.white,
        headerTitleStyle: {
            fontSize: ScreenUtils.Font_18,
            color: ColorUtils.white,
            fontWeight: 'normal',
            flex: 1,
            alignSelf: 'center',
            textAlign: 'center',
        }
    });

    constructor(props)
    {
        super(props);
        this.state = {
            records: [],
        };
    }

    componentDidMount()
    {
        RouterUtils.pushRouter('PageLwpcSubList', this.props.navigation.state.key);
        var that = this;
        this.listener1 = DeviceEventEmitter.addListener('getLwpcSubList', (events) => this.getLwpcSubList(events));
        this.listener2 = DeviceEventEmitter.addListener('jumpPageLwpcSubList', function (event)
        {
            that.props.navigation.navigate('PageLwpcSubAdd', {'item': that.props.navigation.state.params.item});
        });
        this.getLwpcSubList();//获取房屋采集已上报列表
    }

    componentWillUnmount()
    {
        RouterUtils.popRouter('PageLwpcSubList', this.props.navigation.state.key);
        this.listener1.remove();
        this.listener2.remove();
    }

    getLwpcSubList()
    {
        try
        {
            var that = this;
            StorageUtils.get('session').then((session) =>
            {
                if (session != '' && session != null)
                {
                    HttpUtils.getJson(Constant.lwpcReportSubList + '?houseCollectionId=' + that.props.navigation.state.params.item.id, session, function (resultcode, data)
                    {
                        that.setState({
                            records: data.records,
                        });
                    }, function (resultcode, reason)
                    {
                        ToastUtils.toastShortBottom('错误码:' + resultcode + ',错误原因:' + reason);
                    });
                }
            });
        }
        catch (error)
        {
            ToastUtils.toastShortBottom(error);
        }
    }

    delLwpcSub(item)
    {
    }

    renderRecords()
    {
        let allData = [];
        if (this.state.records.length > 0)
        {
            for (let i = 0; i < this.state.records.length; i++)
            {
                let item = this.state.records[i];
                allData.push(
                    <TouchableOpacity key={item.id} activeOpacity={0.8} onPress={() => this.delLwpcSub(item)} style={{paddingTop: 8, paddingLeft: 8, paddingRight: 8}}>
                        <View style={{flexDirection: 'row'}}>
                            <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center'}}>
                                <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>房屋类型:</Text>
                                    <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.houseType}</Text>
                                </View>
                                <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>房屋数量:</Text>
                                    <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.houseAmount}</Text>
                                </View>
                                <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>房屋面积:</Text>
                                    <Text numberOfLines={1} style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.houseArea}</Text>
                                </View>
                                <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>证书编号:</Text>
                                    <Text style={{marginLeft: 8, fontSize: ScreenUtils.Font_14, color: ColorUtils.black}}>{item.certificateNumber}</Text>
                                </View>
                                <View style={{marginTop: 8, flexDirection: 'row', alignItems: 'center'}}>
                                    <Text style={{fontSize: ScreenUtils.Font_14, color: ColorUtils.light_gray}}>房屋照片:</Text>
                                    <Image style={{width: 50, height: 50, borderColor: ColorUtils.line, borderWidth: 1, borderRadius: 10, marginRight: 8,}} source={{uri: item.housePicture}}/>
                                </View>
                            </View>
                        </View>
                        <View style={{marginTop: 16, height: 1, borderColor: ColorUtils.line, borderBottomWidth: 1}}/>
                    </TouchableOpacity>
                );
            }
        } else
        {
            allData.push(
                <View key={-1} style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <Image resizeMode={Image.resizeMode.stretch} style={{marginTop: 80, width: 152, height: 120}} source={require('../img/list_nodata.png')}/>
                    <Text style={{fontSize: ScreenUtils.Font_14, color: '#7EA0BF', fontWeight: 'bold', marginTop: 8}}>暂无数据</Text>
                </View>
            );
        }
        return allData;
    }

    render()
    {
        return (
            <ScrollView style={styles.container}>
                <View style={{borderRadius: 12, marginLeft: 16, marginRight: 16, backgroundColor: ColorUtils.white}}>
                    {this.renderRecords()}
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ColorUtils.white,
    },
});


